<template>
  <div id="clinicEquip">
    <!-- 就诊日期选择 -->
    <div class='mc' v-show='isTime' @click.stop='toggle(0)'></div>
    <div class='datetime'>
      <div class='top'>
        <a @click.stop='toggle(0)'>取消</a>
        <a @click.stop='sureTime'>确定</a>
      </div>
      <mt-picker :slots="slotsTime" @change="onValuesChangeTime"></mt-picker>
    </div>
    <!-- 具体时间点选择 -->
    <div class="marks" v-show="showMarks" @click.stop='showMarks=false'>
      <div class="allTime" @click.stop='showMarks=true'>
        <div @click.stop='showMarks=false' style="width:97%;
            height:0.2rem;
            position: absolute;">
          <i style="background: #000;
                  width:0.15rem;
                  height: 1px;
                  position: absolute;
                  transform: rotate(135deg);
                  top: 0.1rem;
                  right: 0.05rem;"></i>
          <i style="background: #000;
              transform: rotate(45deg);
              width:0.15rem;
              height: 1px;
              position: absolute;
              top: 0.1rem;
              right: 0.05rem;"></i>
        </div>

        <ul class="tip">
          <li>
            <i class="dark"></i>已选
          </li>
        </ul>
        <ul class="ltip">
          <li v-for="(val,key,index) in timeobj" :key="index" style="width:19%" class="white" :class="val.status == 0?'':'dark'">
            <label style="height:30px;line-height: 30px;">
              <input type="checkbox" v-model="select_timeArr" :value="key" :disabled="val.status == 1 || val.status == 2 ?true:false"
                @click="changeRule($event,key)">
              <i style="bottom:-10px" v-if="key<10">0{{key}}:00</i>
              <i style="bottom:-10px" v-if="key>9">{{key}}:00</i>
            </label>
            <input type="number" v-model="val.price" class="price" :class="val.status == 0?'':'dark1'" :disabled="val.status == 1 || val.status == 2 ?true:false">
          </li>
        </ul>
        <a @click.stop="isRight">确定</a>
      </div>
    </div>

    <!-- <div class="marks" v-if="showMarks" @click.stop='showMarks=false'>
     
        <ul class="ltip">
          <li v-for="(val,key,index) in timeobj" :key="index">
            <label style="height:30px">
              <input type="checkbox" v-model="select_timeArr" :value="key" :disabled="val.status == 1 || val.status == 2 ?true:false">
              <span :class="val.status == 1 || val.status == 2 ?'red':''"></span>
              <i style="bottom:-10px">{{key}}</i>
              <input type="number" v-model="val.price" class="price" 
              :disabled="val.status == 1 || val.status == 2 ?true:false">
            </label>
          </li>
        </ul>
        <a @click="isRight">确定</a>
      </div>
    </div> -->
    <header>
      <i @click="goBack()"></i>
      <div>{{chairname}}</div>
    </header>
    <div class="time">
      <span :class="{disabled: !flag1}" @click='flag1 && goPrev(0)'>前一天</span>
      <div>
        <i @click='toggle(1)'>
          <img src="../../image/date.png" alt="">
          <span>{{obj.startdate}} </span>
          <img src="../../image/rows_down.png" alt="">
        </i>
      </div>
      <span :class="{disabled: !flag2}" @click='flag2 && goPrev(1)'>后一天</span>
    </div>
    <ul class='list'>
      <div class='mengceng' v-if="timeobjlen == 0">
        <!-- <img src="../../image/no_collection@2x.png" width='110' alt=""> -->
        <p>当天暂无椅位数据!</p>
      </div>
      <li v-for='(val,key,index) in timeobj' v-if="val.status">
        <!-- <div> -->
        <span>{{key | toStr }}-{{(parseInt(key)+1) | toStr }}</span>
        <p style="width:23%">{{val.status==1?'申请中':val.status==2?'申请成功':val.status==4?'已售出':'申请失败'}}</p>
        <p style="width:23%">￥{{val.price==''||val.price==undefined?'0':val.price}}</p>
        <b style="width:20%;text-align: center" class="active">
          {{val.status == 2?'空闲':val.status == 3?'使用':''}}
        </b>
        <!-- </div> -->
      </li>
    </ul>
    <div class='btn'>
      <a class="confirmBtn" @click="showMarksFun(1)">
        申请椅位开放
      </a>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        type: 'add',
        showMarks: false,
        pickerstatus: '', //
        duration: '', //用户选择完后转化成时间段显示
        timeobj: {}, //0-23小时状态
        price: [], //0-23小时价钱

        select_timeArr: [], //诊所选择的

        clinicid: localStorage.getItem("loginMobile"),
        chairname: '', //当前椅位name
        flag1: false, //前一天是否可点击 默认显示第一个可以预约的日期 不可以点击
        flag2: true, //后一天是否可点击 默认显示第一个可以预约的日期 可以点击
        statusindex: 0, //空闲使用选择器默认指第一个
        obj: {
            id:'',
          chairid: '', //当前椅位id 
          price: '',
          startdate: function () {
            const date1 = new Date(); //获取当前时间
            const date2 = new Date(date1);
            date2.setDate(date1.getDate());
            const month = date2.getMonth() + 1;
            const day = date2.getDate();
            var month1, day1;
            if (month < 10) {
              month1 = '0' + month
            } else {
              month1 = month
            }
            if (day < 10) {
              day1 = '0' + day
            } else {
              day1 = day
            }
            const times = date2.getFullYear() + "-" + month1 + "-" + day1;
            return times;
          }(), //空闲时间
          timeobj: '',
        },
        isTime: false, //是否显示时间选择器
        valuestime: '', //就诊时间选择但未确定时的选项
        slotsTime: [{
          flex: 1,
          values: function () {
            const date1 = new Date(); //获取当前时间
            const dayArr = []; //定义一个数组存储所以时间
            for (var i = 0; i < 14; i++) {
              const date2 = new Date(date1);
              date2.setDate(date1.getDate() + i);
              const month = date2.getMonth() + 1;
              const day = date2.getDate();
              var month1, day1;
              if (month < 10) {
                month1 = '0' + month
              } else {
                month1 = month
              }
              if (day < 10) {
                day1 = '0' + day
              } else {
                day1 = day
              }
              const times = date2.getFullYear() + "-" + month1 + "-" + day1;
              dayArr.push(times); //把未来几天的时间放到数组里
            }
            return dayArr;
          }(),
          className: 'slot1',
          textAlign: 'center'
        }],
        list: [],
      }
    },
    components: {

    },
    filters: {
      // 把数字转换成日期
      toStr(starttime) {
        if (starttime < 10) {
          starttime = '0' + starttime;
        }
        return starttime + ":00";
      },
      // 把日期转换成数字并计算
      starttime([time, index]) {
        time = time.split(" ")[1];
        return parseInt(time) + index;
      },
    },
    computed: {
      timeobjlen: function () {
        const arr = {};
        for (var key in this.timeobj) {
          if (this.timeobj[key].status != 0) {
            arr[key] = this.timeobj[key]
          }
        }
        const len = this.$utils.getJsonLength(arr);
        return len;
      },
    },
    methods: {
      changeRule(e, key) { //0指同意或者不同意 1指点的是收费协议
        var key = key - 8;
        if (e.target.checked) {
          $('.white').eq(key).addClass('green')
        } else {
          $('.white').eq(key).removeClass('green')
        }
      },
      // 确定申请共享
      isRight() {

        const len = this.$utils.getJsonLength(this.select_timeArr);
        // return;
        this.select_timeArr.forEach((val, index) => {
          this.timeobj[val].status = 1;
          this.timeobj[val].price = $('.price')[val - 8].value;
        });
        this.obj.timeobj = JSON.stringify(this.timeobj);
        var arr1 = [];
        for (var i = 8; i < 24; i++) {
          if (this.timeobj[i].status == 1) {
            arr1.push(Number(this.timeobj[i].price))
          }
        }
        this.obj.price = Math.min(...arr1)
        // 添加共享
        // if (this.type == 'edit') {
        //   this.$api.post(this.$api.baseURLSchool, "updatedata/chairs_time/edit", this.obj, r => {
        //     if (r.data.ret == 1) {
        //       this.$utils._toast("提交成功,等待审核");
        //       this.getList();
        //       this.showMarks = false;
        //     }
        //   }, err => {
        //     console.log(err);
        //   })
        // } else {
          this.$api.post(this.$api.baseURLSchool, "updatedata/chairs_time/add", this.obj, r => {
            if (r.data.ret == 1) {            
              this.$utils._toast("提交成功,等待审核");
              this.getList();
              this.showMarks = false;
            }
          }, err => {
            console.log(err);
          })
        // }



      },
      // 获取24个时间段及状态 与价钱
      gettimeobj() { //如果该椅子没有数据  新建0-23小时
        this.timeobj = {};
        var p = $('.price');
        for (var i = 8; i < 24; i++) {
          const obj = {
            status: 0,
            price: '',
          }
          this.timeobj[i] = obj;
        }
      },
      //显示选择时间段
      showMarksFun(status) {
        if (status) {
          if (this.obj.startdate) {
            this.showMarks = true;
          } else {
            this.$utils._toast("请先选择日期");
          }
        }
      },
      // 初始化
      init() {
        this.obj.chairid = this.$route.query.id;
        this.chairname = this.$route.query.chairname;
      },
      // 前一天 后一天
      goPrev(status) { //0 是前一天 1是后一天
        const date1 = new Date(this.obj.startdate); //获取当前时间
        const currDate = new Date(date1);
        if (status == 0) {
          currDate.setDate(date1.getDate() - 1);
        } else if (status == 1) {
          currDate.setDate(date1.getDate() + 1);
        }
        const month = currDate.getMonth() + 1
        const day = currDate.getDate()
        var month1, day1;
        if (month < 10) {
          month1 = '0' + month
        } else {
          month1 = month
        }
        if (day < 10) {
          day1 = '0' + day
        } else {
          day1 = day
        }


        this.obj.startdate = currDate.getFullYear() + "-" + month1 + "-" + day1;
        const minDate = function () {
          const date1 = new Date(); //获取当前时间
          const date2 = new Date(date1);
          date2.setDate(date1.getDate());
          const month = date2.getMonth() + 1;
          const day = date2.getDate();
          var month1, day1;
          if (month < 10) {
            month1 = '0' + month
          } else {
            month1 = month
          }
          if (day < 10) {
            day1 = '0' + day
          } else {
            day1 = day
          }
          const times = date2.getFullYear() + "-" + month1 + "-" + day1;
          return times;
        }();
        const maxDate = function () {
          const date1 = new Date(); //获取当前时间
          const date2 = new Date(date1);
          date2.setDate(date1.getDate() + 5);
          const month = date2.getMonth() + 1;
          const day = date2.getDate();
          var month1, day1;
          if (month < 10) {
            month1 = '0' + month
          } else {
            month1 = month
          }
          if (day < 10) {
            day1 = '0' + day
          } else {
            day1 = day
          }
          const times = date2.getFullYear() + "-" + month1 + "-" + day1;

          return times;
        }();
        this.getList();
        if (this.obj.startdate == minDate) {
          this.flag1 = false;
        } else {
          this.flag1 = true;
        }
        if (this.obj.startdate == maxDate) {
          this.flag2 = false;
        } else {
          this.flag2 = true;
        }
      },
      // 返回
      goBack() {
        this.$router.back();
      },
      // 控制日期选择器显示隐藏动画
      toggle(status) { //status 0隐藏 1显示
        if (status) {
          this.isTime = true;
          $(".datetime").addClass("up").removeClass("down");
        } else {
          $(".datetime").addClass("down").removeClass("up");
          this.isTime = false;
        }
      },
      //就诊时间
      onValuesChangeTime(picker, values) {
        this.valuestime = values.join();
      },
      //确定就诊时间
      sureTime() {
        this.obj.startdate = this.valuestime;
        this.goPrev();
        this.toggle(0);
        this.getList();
      },
      // 获取共享信息列表
      getList() {
        this.$api.get(this.$api.baseURLSchool, "selectdata2/chairs_time?chairid=" + this.obj.chairid + "&startdate=" +
          this.obj.startdate, {}, r => {
            if (r.data.ret == 1) {
              if (r.data.info.length == 0) { //新建
                this.gettimeobj();
                this.type = 'add'
              } else {
                this.type = 'edit',
                this.obj.id=r.data.info[0].id;

                this.timeobj = JSON.parse(r.data.info[0].timeobj);
              };
            } else if (r.data.ret == 0) {
              if (r.data.info.length == 0) { //新建
                this.type = 'add'
                this.gettimeobj();
              } else {
                this.type = 'edit',
                this.obj.id=r.data.info[0].id;

                this.timeobj = JSON.parse(r.data.info[0].timeobj);
              };
            }
          }, err => {
            console.log(err);
          })
      },

    },
    created() {
      this.init();
      this.getList();
      this.gettimeobj();

    },
    mounted() {}
  }

</script>
<style lang="scss" scoped>
  .mengceng {
    padding: 40px 0;

    img {
      display: block;
      margin: 0 auto;
    }

    p {
      padding-top: 10px;
      text-align: center;
    }
  }

  .price {
    width: 0.3rem;
    margin: auto;
    height: 0.18rem;
    border: 1px solid #eee;
    font-size: 7px;
    color: #000;
    text-align: center;
  }

  .red {
    background: #f5aeae;

  }

  .dark {
    background: #d2d2d2;

  }

  .dark1 {
    background: #d2d2d2;
    border: transparent;
  }

  .green {
    background: #d2e9fd;

  }

</style>
